<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>MooTools StopIE6</title>

<link  href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="stopIE6.js" type="text/javascript"></script>

<script type="text/javascript">
<!-- 

window.addEvent('domready',function(){
	
	if (Browser.Engine.trident && Browser.Engine.version <= 4) {
		$(document.body).stopIE6();
	}	
		
	$('demoBar').addEvent('click',function(e){
		e.stop();
		$(document.body).stopIE6({
			html: new Element('div',{
				text: 'I Do Not Like Internet Explorer Six, So 2001.'
				+'use Firefox, Opera, Google Chrome or Safari instead!'
			})

		});
	});
	
	

});
	
// -->	
</script>


</head>
<body>

<div id="container">

<h1>MooTools Stop Internet Explorer 6 bar</h1>

<p>
	Which webdeveloper does like Internet Explorer 6? Not many I guess. 
	Therefore there are many <em>Stop IE6 campains</em>, like 
	<a href="http://westhoffswelt.de/projects/activebar2.html">Activebar2</a>.
	But what? jQuery... What a pitty, that must be a big overhead to load 
	the whole jQuery library when you use MooTools. 
	So I ported it to MooTools. Like Activebar2 you can use this for any
	kind of information you want you present your users with ease.
</p>

<h2>Demo</h2>

<p>
	If you use IE6 (why ??:(.. ), you should already see the bar at the top.
	If you do not use IE6, you can click <a href="#" id="demoBar">this link</a> to open the bar.
</p>

<h2>Example Code</h2>

<pre>
<strong>Javascript</strong>	
window.addEvent('domready',function(){
	
	if (Browser.Engine.trident &amp;&amp; Browser.Engine.version &lt;= 4) {
		$(document.body).stopIE6();
	}

});
</pre>

<p>
	If you do not want to download the stopIE6.js file if you are not browsing with IE6, you can use 
	conditional comments.
</p>
<pre>
<strong>HTML</strong>	
&lt;!--[if lte IE 6]&gt;

&lt;script src=&quot;stopIE6.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
window.addEvent('domready',function(){
	
	if (Browser.Engine.trident &amp;&amp; Browser.Engine.version &lt;= 4) {
		$(document.body).stopIE6();
	}
	
});
&lt;/script&gt;

&lt;![endif]--&gt; 
</pre>

<h3>More advanced stuff</h3>

<pre>
<strong>Javascript</strong>	
window.addEvent('domready',function(){
	
	if (Browser.Engine.trident &amp;&amp; Browser.Engine.version &lt;= 4) {

		// If you want another text, you can use the html option
		
		$(document.body).stopIE6({
			html: 'I Do Not Like Internet Explorer Six, So 2001.'
				+'use Firefox, Opera, Google Chrome or Safari instead!'
		});
		
		// The html option does also handle elements
		// you can create a new element
		$(document.body).stopIE6({
			html: new Element('div',{
				text: 'I Do Not Like Internet Explorer Six, So 2001.'
				+'use Firefox, Opera, Google Chrome or Safari instead!'
			})
		});
		
		// Or use a element that is already in the DOM		
		$(document.body).stopIE6({
			html: document.id('myStopIE6Element')
		});
		
	}

});
</pre>


<h2>Documentation</h2>

<h3>Syntax:</h3>

<pre>myElement.stopIE6([options]);</pre>

<h3>Arguments:</h3>

<ol>
	<li>options - (object,optional) An object with options for the drop menu. See below</li>
</ol>

<h3>Options:</h3>

<ul>
	<li>styles - (object) An object with all the css styles for the horizontal bar</li>
	<li>contentStyles - (object) An object with all the css styles for the content element, for paddings, margins etc.</li>
	<li>stylesHover - (object) An object with all the css styles when you hover the bar</li>
	<li>infoIcon - (string|bool) The path to the info icon image, if you do not want the info icon you can set this to false</li>
	<li>closeButton - (string|bool) The path to the close button image, if you do not want the close button, you can set this to false</li>
	<li>ie6 - (bool) If the current user agent is IE6 or lower</li>
	<li>html - (string|element) The text/html of the bar. You can set your own text here</li>
</ul>

<h3>Events:</h3>

<ul>
	<li>open - (function) How you want to open de bar (default <code>bar.setStyle('display','block');</code>)</li>
	<li>close - (function) How you want to close the bar (default <code>bar.setStyle('display','none');</code>)</li>
	<li>click - (function) When you click on the bar</li>
</ul>

<h2>Download &amp; links</h2>

<ul>
	<li>Download the full uncompressed <a href="stopIE6.js">stopIE6.js</a> (3.7 kB)</li>
	<li>Download the minified <a href="stopIE6-min.js">stopIE6-min.js</a> (2.5 kB)</li>
	<li>Download the <a href="http://awfmootools.googlecode.com/svn/trunk/stopIE6/images/">images here</a></li>
	<li>Check out the Source Code at <a href="http://code.google.com/p/awfmootools/source/browse/trunk/stopIE6/">Google Code</a></li>
	<li>Download at <a href="http://www.esteak.net/plugin/StopIE6">eSteak</a></li>		
	<li>Follow the discussion at <a href="http://www.mooforum.net/scripts12/stopie6-information-bar-t2091.html">Mooforum.net</a></li>
</ul>

<h2>Dependencies</h2>
<ul>
	<li>
		Mootools 1.2
		<ul>
			<li>Element.Style</li>
			<li>Element.Event</li>
			<li>Element.Dimensions</li>
			<li>Class.Extras</li>
		</ul>
	</li>
</ul>

<h2>License</h2>
<p>
	MIT-style license.
</p>

<h2>Created By</h2>
<p>
	<a href="http://www.aryweb.nl">Aryweb Webdevelopment</a>
</p>

</div>

</body>
</html>
